<template>
  <el-table-column :sortable="sortable" :prop="property" :label="label" :width="width">
    <template #default="{row, column, $index}">
      <img v-if="typeof row[props.property] === 'string'"
           alt="image" title="点击查看大图" :src="row[props.property]"
           @click.stop="openAlbum(row[props.property], 0)"
           style="cursor: pointer;width: 50px;height: 50px;"/>

      <div v-else-if="Array.isArray(row[props.property])">
        <img v-for="(item, index) in row[props.property]" :key="index"
             alt="image" title="点击查看大图" :src="item"
             @click.stop="openAlbum(item, index)"
             style="cursor: pointer;width: 50px;height: 50px;"/>
      </div>

      <div v-else style="text-align: center;cursor: pointer; width: 50px;height: 50px;padding-top: 12px;border: 1px solid lightgray;"
        title="暂无图片资源！">
        <i class="fa fa-warning"></i>
      </div>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import Eventbus from "@/lang/eventbus/index";
/* eslint-disable */

/**
 * 表格行内图片
 *
 * 图片缩略图高度为 50 像素，会影响到表格布局
 */
const props = defineProps({
    // 宽度
    width: {type: [Number, String], default: undefined}
    // 字段名
    , property: String
    // 列名
    , label: String
    // 列名
    , sortable: {type: [Boolean, String], default: false}
});

/**
 * 打开相册
 *
 * @param url   图片列表
 * @param index 打开的序号
 */
const openAlbum = (url, index) => {
    Eventbus.openAlbum(url, index);
};
</script>
